<template>
  <section id="home">
    <!-- 搜索框 -->
    <div class="searchBox">
      <div class="urlButton" @click="jumpRouter('/coupon')">
        <span>
          <img src="http://pic1.brandcn.com/link.png" />
        </span> 转链
      </div>
      <van-search placeholder="请输入宝贝名称,关键字,关键词" @click="jumpRouter('/optional')"></van-search>
    </div>

    <!-- banner -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img :src="item.image" @click="jumpWindow(item.uri)" />
      </van-swipe-item>
    </van-swipe>

    <!-- 公告 -->
    <!--mode="link"-->
    <van-notice-bar @click="jumpRouter('/')" text="快来领优惠领取大额券，领券买更实惠加入会员更享返利，领优惠不仅省钱还能赚钱！" />

    <!-- 三方链接 -->
    <div class="flexCont">
      <div class="pddCont" @click="jumpWindow('http://zt.lingyouhui.vip/#/pddList')">
        <img src="../../asserts/images/pdd_min_bg.png" />
        <span>拼多多商城</span>
      </div>

      <div class="jdCont" @click="jumpWindow('http://zt.lingyouhui.vip/#/jdList')">
        <img src="../../asserts/images/jd_min_bg.png" />
        <span>京东商城</span>
      </div>
    </div>

    <!-- 其他商城 -->
    <div class="otherSpCont">
      <div class="otherCont1" @click="jumpWindow('http://dtk.lingyouhui.vip/')">
        <h6>人工精选</h6>
        <p>为您精心挑选品牌好货</p>
        <div class="imgCont">
          <img src="../../asserts/images/c1.png" />
          <img src="../../asserts/images/c2.png" />
          <img src="../../asserts/images/c3.png" />
        </div>
      </div>

      <div class="otherCont2" @click="jumpWindow('http://zt.lingyouhui.vip/')">
        <h6>爆款推荐</h6>
        <p>打造具有推荐性的爆款</p>
        <div class="imgCont">
          <img src="../../asserts/images/c4.png" />
          <img src="../../asserts/images/c5.png" />
          <img src="../../asserts/images/c6.png" />
        </div>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="featureBoxShops">
      <div class="featureBoxShopsList" v-for="(item,index) in listMain">
        <a>
          <div class="featureBoxShopsListImg">
            <img :src="item.pict_url" />
          </div>
          <div class="featureBoxShopsListMain">
            <div class="featureBoxShopsListMain-title">
              <p>{{item.title}}</p>
            </div>
            <div class="featureBoxShopsListMain-store">
              <img
                src="https://img.alicdn.com/tps/TB1XfA2JVXXXXcQXXXXXXXXXXXX-16-16.png"
                v-if="item.user_type"
              />
              <b v-else></b>
              <span>{{item.shop_title}}</span>
            </div>
            <div class="featureBoxShopsListMain-price">
              <span class="price-right">
                &yen;{{item.zk_final_price-item.coupon_amount | number}}
                <s>&yen;{{item.zk_final_price}}</s>
              </span>
              <span class="sales-left">销量：{{item.volume}}</span>
            </div>
            <div class="featureBoxShopsListMain-ticket">
              <span>券: {{item.coupon_amount}}元</span>
            </div>
          </div>
        </a>
      </div>
    </div>

    <!-- 推荐码 https://gw.alicdn.com/tfs/TB1iEkBsG6qK1RjSZFmXXX0PFXa-610-360.png-->
    <!-- @/asserts/images/home/sy_game2.png -->
  </section>
</template>

<script>
import storages from "@/utils/storage.js";
import ajax from "@/utils/request/ajax.js";

export default {
  data() {
    return {
      images: [
        {
          image: "http://qiniu.lingyouhui.vip/qsh/qshbanner.png",
          uri: "https://d.qshme.com/?code=z8mezw"
        },
        {
          image:
            "https://gw.alicdn.com/tfs/TB11MK6XZKfxu4jSZPfXXb3dXXa-440-180.png",
          uri: "https://s.click.taobao.com/wovgelv"
        },
        {
          image:
            "https://gw.alicdn.com/tfs/TB1OycXtUz1gK0jSZLeXXb9kVXa-440-180.jpg",
          uri: "https://s.click.taobao.com/DPEhelv"
        },
        {
          image:
            "https://img.alicdn.com/tfs/TB1M2OqyEY1gK0jSZFMXXaWcVXa-440-180.png",
          uri: "https://s.click.taobao.com/d8phelv"
        },
        {
          image:
            "https://gw.alicdn.com/tfs/TB1KREftKH2gK0jSZJnXXaT1FXa-440-180.jpg",
          uri: "https://s.click.taobao.com/d0Ehelv"
        }
      ],
      listMain: []
    };
  },
  components: {},
  methods: {
    jumpWindow(uri) {
      window.open(uri);
    },
    jumpRouter(uri, querys) {
      this.$router.push({
        path: uri,
        query: querys
      });
    },
    jumpOpen(uri, querys) {
      let routeData = this.$router.resolve({
        name: uri,
        query: querys
      });
      window.open(routeData.href, "_blank");
    },
    async dd() {
      const url = "http://localhost:8080/main/v1/user/sendSms";
      let data = {
        phone: "13260033388",
        purpose: "register"
      };
      let a = await ajax("POST", url, data);
      console.log(a);
    },
    material() {
      // 加载遮罩
      let loadToast = this.$toast.loading({
        mask: true,
        message: "加载中...",
        duration: "30000"
      });

      this.service
        .material({
          material_id: "3786",
          page_no: 1,
          page_size: 20
        })
        .then(res => {
          if (res.code == 1) {
            loadToast.clear();
            let list = res.data;
            if (list.tbk_dg_optimus_material_response) {
              this.listMain =
                list.tbk_dg_optimus_material_response.result_list.map_data;
              console.log(this.listMain);
              //this.totalNum = list.tbk_dg_optimus_material_response.total_results
            } else {
              this.listMain = [];
              this.totalNum = 0;
              this.$toast("搜索无结果！");
            }
          }
        });
    }
  },
  mounted() {
    this.material();
    // this.dd();
  },
  filters: {
    number: function(data, n) {
      return data.toFixed(1);
    }
  },
  computed: {}
};
</script>
<style scoped lang="scss">
#home {
  padding-bottom: 120px;
  .searchBox {
    position: relative;
    background: -webkit-linear-gradient(
      left,
      #fba959,
      #fb897d,
      #fa4ebe
    ) !important;
    background: -o-linear-gradient(right, #fba959, #fb897d, #fa4ebe) !important;
    background: -moz-linear-gradient(
      right,
      #fba959,
      #fb897d,
      #fa4ebe
    ) !important;
    background: linear-gradient(to right, #fba959, #fb897d, #fa4ebe) !important;
    .urlButton {
      span {
        display: inline-block;
        background: #f5272d;
        border-radius: 50%;
        padding: 8px;

        img {
          width: 25px;
        }
      }
      position: absolute;
      top: 20px;
      left: 15px;
      z-index: 1;
      padding: 3px 20px 3px 3px;
      text-align: center;
      background: #ffffff;
      color: #f5272d;
      font-size: 24px;
      border: 2px solid #f5272d;
      border-radius: 25px;
    }
    .van-search {
      // background: #FF852A !important;
      margin-left: 160px;
      background: none !important;
    }
  }
  .van-row {
    margin: 20px 0;
  }
  .van-notice-bar {
    position: relative;
  }

  .flexCont {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
    display: flex;
    justify-content: space-around;

    .pddCont {
      padding-right: 30px;
      line-height: 112px;
      position: relative;
      img {
        width: 100%;
      }
      span {
        position: absolute;
        top: 2px;
        left: 10px;
        font-size: 36px;
      }
    }

    .jdCont {
      padding-left: 30px;
      line-height: 112px;
      position: relative;
      img {
        width: 100%;
      }
      span {
        position: absolute;
        top: 2px;
        left: 40px;
        font-size: 36px;
      }
    }

    span {
      font-size: 30px;
      padding-left: 20px;
      color: #fff;
    }
  }

  .otherSpCont {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 0px;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    padding-bottom: 20px;

    .otherCont1 {
      h6 {
        font-size: 34px;
        line-height: 60px;
        height: 60px;
        color: #ff6766;
        margin-top: 20px;
      }
      p {
        font-size: 30px;
        line-height: 50px;
        height: 50px;
        color: #b0bec5;
      }
      .imgCont {
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        img {
          width: 112px;
          height: 112px;
        }
      }
    }

    .otherCont2 {
      h6 {
        font-size: 34px;
        line-height: 60px;
        height: 60px;
        color: #ff6766;
        margin-top: 20px;
      }
      p {
        font-size: 30px;
        line-height: 50px;
        height: 50px;
        color: #b0bec5;
      }
      .imgCont {
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        img {
          width: 112px;
          height: 112px;
        }
      }
    }
  }

  .featureBoxShops {
    background: #fafafc;
    padding: 20px 30px 60px;
    margin-top: 20px;
    .featureBoxShopsList {
      width: 100%;
      margin: 15px 0 20px;
      background: #fff;
      a {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .featureBoxShopsListImg {
          width: 35%;
          img {
            width: 100%;
          }
        }
        .featureBoxShopsListMain {
          width: 61%;
          padding: 11px 0px 8px 0;
          margin-right: 15px;
          border-bottom: 1px solid #eceff1;
          .featureBoxShopsListMain-title {
            width: 100%;
            p {
              width: 100%;
              font-size: 30px;
              line-height: 45px;
              color: rgb(51, 51, 51);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          .featureBoxShopsListMain-store {
            width: 100%;
            height: 40px;
            line-height: 40px;
            img {
              float: left;
              margin-top: 8px;
            }
            span {
              float: left;
              margin: 3px 0 0 8px;
              font-size: 28px;
              color: #b0bec5;
              letter-spacing: 0.1rem;
            }
          }
          .featureBoxShopsListMain-price {
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            .price-right {
              font-size: 32px;
              font-weight: bold;
              color: #e03339;
              s {
                color: #b0bec5;
                font-size: 26px;
                font-weight: 100;
              }
            }
            .sales-left {
              color: #b0bec5;
              font-size: 26px;
            }
          }
          .featureBoxShopsListMain-ticket {
            height: 50px;
            margin-top: 10px;
            color: #e03339;
            font-size: 26px;
            span {
              display: inline-block;
              height: 50px;
              line-height: 50px;
              padding: 2px 10px;
              border: 1px solid #e03339;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>